<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?tomleg');
            src: url('fonts/icomoon.eot?tomleg#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?tomleg') format('truetype'),
                url('fonts/icomoon.woff?tomleg') format('woff'),
                url('fonts/icomoon.svg?tomleg#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        * {
            margin: 0;
            padding: 0
        }

        html,
        body {
            height: 100%
        }

        li {
            list-style: none;
        }

        body {
            position: relative;
        }

        .w {
            width: 1300px;
            position: absolute;
            top: 0;
            left: 50%;
            margin-left: -655px;
            /* background-color: #ccc; */
        }

        .top {
            width: 100%;
            height: 60%;
            background-color: #00b38a;
        }

        .logo {
            margin-top: 160px;
            width: 300px;
        }

        .box {
            margin-top: 40px;
            padding: 10px;
            height: 780px;
            background-color: #fff;
            border: 1px solid #cfcfcf;
        }

        .box .imgs .qrcode {
            width: 120px;
        }

        .box .imgs .wx {
            position: absolute;
            top: 320px;
            width: 220px;

        }

        .box .left {
            position: absolute;
            left: 120px;
            height: 650px;
            /* background-color: pink; */
        }

        .box .left .text {
            font-size: 40px;
            font-weight: 350;
            color: #555555;


        }

        .box .left .text li {
            padding: 15px 65px;
            float: left;
            border-bottom: 2px solid #555555;
        }

        .box .left .text li:nth-child(1) {
            color: #00b38a;
            border-bottom: 2px solid #00b38a;
        }


        .box .left .text li span:nth-child(1) {
            position: absolute;
            top: 48px;
            left: 140px;
            border: 18px solid transparent;
            border-bottom: 18px solid #00b38a;
        }

        .box .left .text li span:nth-child(2) {
            position: absolute;
            top: 50px;
            left: 140px;
            border: 18px solid transparent;
            border-bottom: 18px solid white;
        }

        .box .left .texts {
            border: 0;
            border-bottom: 1px solid #555555;
            padding-top: 40px;
            height: 100px;
            width: 620px;
            font-size: 25px;
            color: #757575;
        }

        .box .left p {
            padding: 40px 0;
            padding-left: 520px;
            font-size: 22px;
            color: #00b38a;
        }

        .box .left .btn {
            height: 100px;
            width: 620px;
            border: 0;
            background-color: #00b38a;
            font-size: 40px;
            color: white;
        }

        .box .right {
            float: right;
        }

        .box .right .header {
            padding-top: 200px;
            height: 80px;
            width: 450px;
            border-left: 1px dotted #555;
        }

        .box .right .header h4 {
            margin-left: 80px;
            font-size: 26px;
            font-weight: normal;
            color: #757575;
        }

        .box .right .header h4:nth-child(2) {
            display: inline;
            margin-top: 5px;
            color: #00b38a;
        }

        .box .right .header span {
            padding-left: 10px;
            font-family: 'icomoon';
            color: #00b38a;
            font-size: 24px;
        }

        .box .right .or {
            color: #555;
            font-size: 24px;
            margin-left: -12px;
        }

        .box .right .bottom {
            margin-top: 10px;
            padding-top: 60px;
            padding-left: 80px;
            height: 200px;
            width: 370px;
            border-left: 1px dotted #555;
        }

        .box .right .bottom h4 {
            font-size: 26px;
            font-weight: normal;
            color: #757575;
        }

        .box .right .bottom .images img {
            margin-top: 20px;
            margin-right: 40px;
            width: 30px;
        }
    </style>
</head>

<body>
    <div class="top"></div>
    <div class="w">

        <img class="logo" src="img2/logo.png" alt="">
        <div class="box">
            <div class="imgs">
                <img class="qrcode" src="img2/qrcode-normal.svg" alt="">
                <img class="wx" src="img2/wx-login.svg" alt="">
            </div>
            <form class="left" action="#">
                <div class="text">
                    <ul>
                        <li class="no1">密码登录
                            <span></span>
                            <span></span>
                        </li>
                        <li class="no2">验证码登录</li>
                    </ul>
                </div>
                <input type="text" class="texts" value="请输入常用手机号或邮箱">
                <input type="text" class="texts" value="请输入密码">
                <p>忘记密码？</p>
                <input type="button" class="btn" value="登录">
            </form>
            <div class="right">
                <div class="header">
                    <h4>还没有账号</h4>
                    <h4>立即注册</h4>
                    <span></span>
                </div>
                <p class="or">or</p>
                <div class="bottom">
                    <h4>使用一下账号直接登录</h4>
                    <div class="images">
                        <img src="img2/icon-sina1.png" alt="">
                        <img src="img2/icon-tencent.png" alt="">
                        <img src="img2/icon-wechat.png" alt="">
                        <img src="img2/icon-baidu.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>

    </div>

</body>

</html>